<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>home</title>
    <link rel="stylesheet" href="../layui/css/layui.css"/>
    <link rel="stylesheet" href="../css/yzr_index_main.css"/>
    <script src="https://cdn.bootcss.com/echarts/4.1.0.rc2/echarts-en.common.js"></script>
    <style rel="stylesheet" type="text/css">

        body {
            padding: 15px;
            background-color: #fff;
        }

        .yz-item {
            background-color: #fff;
            box-shadow: 0px 0px 1px 1px #ddd;
            height: 120px;
            padding: 15px;
            margin-right: 15px;
            margin-bottom: 15px;
            width: 300px;
            display: block;
            float: left;
        }

        .yz-item:hover {
            box-shadow: 0px 0px 1px 1px #269bf0;
        }

        .yz-item-tab {
            width: 50%;
            height: 100%;
            vertical-align: center;
            text-align: center;
            float: left;
            line-height: 80px;
        }

        .yz-item-tab p {
            color: gray;
            margin-top: -55px;
        }

        .border-dash {
            border-right: 1px dashed #ccc;
        }

        .yz-chart-item {
            box-shadow: 0px 0px 1px 1px #ddd;
            width: 500px;
            height: 400px;
            display: inline-block;
            margin-right: 15px;
        }


    </style>
</head>
<body>

<div>
    <div class="yz-item">
        <div class="yz-item-tab">
            <i class="layui-icon layui-icon-notice" style="font-size: 3em;color: #1e9fff;"></i>
            <p>通知浏览</p>
        </div>
        <div class="yz-item-tab">
            <button class="layui-btn layui-btn-normal" style="margin-top: 30px">查看通知
                <span class="layui-badge layui-badge-gray">99+</span>
            </button>
        </div>
    </div>
    <div class="yz-item">
        <div class="yz-item-tab">
            <i class="layui-icon layui-icon-flag" style="font-size: 3em;color: #ff5722;"></i>
            <p>待办事件</p>
        </div>
        <div class="">
            <button class="layui-btn layui-btn-danger" style="margin-bottom: 2px;margin-left: 10px;">
                <i class="layui-icon layui-icon-list" style="color:#fff;"></i>
                待检查任务
            </button>
            <button class="layui-btn layui-btn-danger" style="margin-bottom: 2px">
                <i class="layui-icon layui-icon-list" style="color:#fff;"></i>
                待上报隐患
            </button>
            <button class="layui-btn layui-btn-danger" style="margin-bottom: 2px">
                <i class="layui-icon layui-icon-list" style="color:#fff;"></i>
                待整改隐患
            </button>

        </div>
    </div>
    <div class="yz-item">
        <div class="yz-item-tab">
            <i class="layui-icon layui-icon-about" style="font-size: 3em;color: #009688;"></i>
            <p>企业信息</p>
        </div>
        <div class="yz-item-tab">
            <button class="layui-btn" style="margin-bottom: 2px;margin-left: 10px;">
                <i class="layui-icon layui-icon-list" style="color:#fff;"></i>
                企业基本信息
            </button>
            <button class="layui-btn" style="margin-top: -80px">
                <i class="layui-icon layui-icon-list" style="color:#fff;"></i>
                停业在业状态
            </button>

        </div>
    </div>
    <div style="clear: both;"></div>
</div>

<div>
    <span id="chart_a" class="yz-chart-item">aasdfa</span>
    <span id="chart_b" class="yz-chart-item">aasdfa</span>
</div>

<script type="text/javascript">

    var myChartA = echarts.init(document.getElementById('chart_a'));
    var myChartB = echarts.init(document.getElementById('chart_b'));

    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '年度隐患整改信息',
            subtext:"隐患数量",
            x:'center'
        },
        tooltip: {},
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ["一般隐患数", "已完成整改数", "已逾期整改隐患数"]
        },
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:335, name:'一般隐患数'},
                    {value:310, name:'已完成整改数'},
                    {value:234, name:'已逾期整改隐患数'},
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    var option_b = {
        title: {
            text: '年度重大隐患整改信息',
            subtext:"重大隐患",
            x:'center'
        },
        tooltip: {},
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ["重大隐患数", "已完成整改数", "已逾期整改隐患数"]
        },
        series : [
            {
                name: '访问来源',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:35, name:'重大隐患数'},
                    {value:100, name:'已完成整改数'},
                    {value:234, name:'已逾期整改隐患数'},
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    // 使用刚指定的配置项和数据显示图表。
    myChartA.setOption(option);
    myChartB.setOption(option_b)
</script>
</body>
</html>